<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('日期时间选择')}`">{{ $t('日期时间选择') }}</t>
        </template>
        <div style="display:flex;color:#999;">
            <div style="width: 300px;margin-right:20px;">
                <p style="color:#666;">普通用法：</p>
                <sib-item v-model="value1" :props="props1"></sib-item>
                <p>{{ value1 || '--' }}</p>
            </div>
            <div style="width: 300px;margin-right:20px;">
                <p style="color:#666;">设置默认时刻：</p>
                <sib-item v-model="value2" :props="props2"></sib-item>
                <p>{{ value2 || '--' }}</p>
            </div>
            <div style="width: 300px;margin-right:20px;">
                <p style="color:#666;">年月日时分选择：</p>
                <sib-item v-model="value3" :props="props3"></sib-item>
                <p>{{ value3 || '--' }}</p>
            </div>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value1 = ref(null);
        const props1 = reactive({
            type: 'datetime',
        });

        const value2 = ref(null);
        const props2 = reactive({
            type: 'datetime',
            defaultTime: '13:50:20',
        });

        const value3 = ref(null);
        const props3 = reactive({
            type: 'datetime',
            defaultTime: new Date(),
            // defaultTime: '13:50',
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm',
        });

        return {
            value1,
            props1,
            value2,
            props2,
            value3,
            props3,
            templateString: `<template>
    <div style="display:flex;">
        <div style="width: 300px;">
            <p>普通用法：</p>
            <sib-item v-model="value1" :props="props1"></sib-item>
            <p>{{ value1 || '--' }}</p>
        </div>
        <div style="width: 300px;">
            <p>设置默认时刻：</p>
            <sib-item v-model="value2" :props="props2"></sib-item>
            <p>{{ value2 || '--' }}</p>
        </div>
        <div style="width: 300px;">
            <p>年月日时分选择：</p>
            <sib-item v-model="value3" :props="props3"></sib-item>
            <p>{{ value3 || '--' }}</p>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value1 = ref(null);
        const props1 = reactive({
            type: 'datetime',
        });

        const value2 = ref(null);
        const props2 = reactive({
            type: 'datetime',
            defaultTime: '13:50:20',
        });

        const value3 = ref(null);
        const props3 = reactive({
            type: 'datetime',
            defaultTime: new Date(),
            // defaultTime: '13:50',
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm',
        });

        return { value1, props1, value2, props2, value3, props2 };
    },
};
<\/script>`,
        };
    },
};
</script>
